<template>
  <div class="nav-container">
    <div class="nav" v-for="(item,index) in navs" :key="index">
      <span class="iconfont" :class="item.icon"></span>
      <span class="nav-title">{{item.name}}</span>
    </div>
  </div>
</template>
<script setup lang="ts">

const navs = [
  {
    name:"甲油胶",
    icon:"icon-art",
    class:"nav1"
  },
  {
    name:"潮流饰品",
    icon:"icon-a-camerashot",
    class:"nav2"
  },
  {
    name:"美甲工具",
    icon:"icon-clarity",
    class:"nav3"
  },
  {
    name:"美睫产品",
    icon:"icon-effects",
    class:"nav4"
  },
  {
    name:"美甲灯",
    icon:"icon-a-Closeupshot",
    class:"nav5"
  },
  {
    name:"笔系列",
    icon:"icon-Shadow",
    class:"nav6"
  },
  {
    name:"批发套装",
    icon:"icon-Colors",
    class:"nav7"
  },
  {
    name:"全部分类",
    icon:"icon-Scene",
    class:"nav8"
  }
]
</script>

<style scoped lang="less">
.nav-container{
  padding: 10px;
  overflow: hidden;
  clear: both;
  background-color: #fff;
  text-align: center;
  .nav{
    float: left;
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    .iconfont{
      display: block;
      background-color: #f3f4f5;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 25px;
      text-align: center;
      line-height: 50px;
    }
    .nav-title{
      font-size: 14px;
      margin-top: 5px;
    }
    .icon-art{
      color:#2a83fe
    }
    .icon-a-camerashot{
      color: #fd3671;
    }
    .icon-clarity{
      color: #2b91e2;
    }
    .icon-effects{
      color: #00b478;
    }
    .icon-a-Closeupshot{
      color: #f7a9a9;
    }
    .icon-Shadow{
      color: #f7a9a9;
    }
    .icon-Colors{
      color: #f7a9a9;
    }
    .icon-Scene{
      color: #f7a9a9;
    }
  }
}
</style>